<template>
  <view>
    <view class="padding-30">
      <view class="card padding-30">
        <l-title title="用车信息" />
        <view class="card itinerary padding-tb-30 margin-top-30">
          <view class="flex-row justify-between align-center">
            <view class="flex-row flex-center flex-item">
              <text class="text-30 color-t1 text-bold">{{ dateFormat(orderInfo.startDate) }}</text>
            </view>
            <view class="flex-row flex-center">
              <text class="text-26 color-t1">{{ day }}天</text>
            </view>
            <view class="flex-row flex-center flex-item">
              <text class="text-30 color-t1 text-bold">{{ dateFormat(orderInfo.endDate) }}</text>
            </view>
          </view>
          <view class="padding-lr-30 text-center margin-top-30">
            <text class="text-26 color-t1">{{ orderInfo.itinerary }}</text>
          </view>
        </view>
        <l-data-cell label="客户名称" :value="orderInfo.creatorName" padding="10rpx 0" />
        <l-data-cell label="客户手机号" :value="orderInfo.creatorPhone" padding="10rpx 0" />
        <l-data-cell label="车型" :value="orderInfo.brand && orderInfo.seatAmount ? orderInfo.brand + orderInfo.seatAmount + '座' : ''" padding="10rpx 0" />
        <l-data-cell label="乘车人数" :value="orderInfo.passengers" padding="10rpx 0" />
        <l-data-cell label="联系人/导游" :value="orderInfo.contact" padding="10rpx 0" />
        <l-data-cell label="联系电话" :value="orderInfo.phone" padding="10rpx 0" />
        <view v-if="orderInfo.itineraryUrl">
          <image class="block itineraryUrl" :src="orderInfo.itineraryUrl" @click="viewImage" />
        </view>
      </view>
      <view class="card padding-top-30 padding-lr-30 padding-bottom-20 margin-top-30">
        <l-title title="订单信息" />
        <l-data-cell label="下单时间" :value="orderInfo.createTime" padding="10rpx 0" />
      </view>
    </view>

    <safe-area-botom v-if="!orderInfo.status" />
    <l-bottom-button v-if="!orderInfo.status" text="确认订单" @click="confirmOrder" />
  </view>
</template>

<script>
import { viewImage } from '@/common/util'
export default {
  name: 'HookDetail',
  props: {
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    day() {
      const s = this.orderInfo.startDate
      const e = this.orderInfo.endDate
      if (s && e) {
        const startDate = Date.parse(s.substring(0, s.indexOf(' ')))
        const endDate = Date.parse(e.substring(0, e.indexOf(' ')))
        const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000) + 1
        return days
      }
      return 1
    },
    dateFormat() {
      return (date) => {
        if (date) {
          const arr = date.slice(5).split(' ')
          arr[0] = arr[0].replace(/0/g, '').replace('-', '月') + '日'
          arr[1] = arr[1].slice(0, 5)
          return arr.join(' ')
        }
        return ''
      }
    }
  },
  methods: {
    confirmOrder() {
      this.jump('/order/add-new/add-new?hookId=' + this.orderInfo.id)
    },
    viewImage() {
      viewImage(0, [this.orderInfo.itineraryUrl])
    }
  }
}
</script>

<style scoped lang="scss">
.itinerary{
  background:#F7F7F7;
  border-radius:20rpx;
}
.itineraryUrl{
  width:140rpx;
  height:140rpx;
  border-radius:$radius-default;
}
</style>
